<template>
	<view class="orders">
		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#0E9698 " :activeStyle="{
          color: '#333',
        }" :inactiveStyle="{
          color: '#c2c1c1',
        }" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>

		<view class="orders-content">
			<!-- 订单列表 -->
			<view class="orders-list" v-if="ordersList.length">
				<view v-for="(im,index) in ordersList" :key="index" class="orders-item">
					<!--  -->
					<view class="">
						<view class="top flex-between">
							<view class="flex-center">
								<view style="margin-left: 16rpx;font-size: 24rpx;">订单编号：{{im.orderid}}</view>
							</view>
							<view class="status">
								<view style="font-size: 24rpx;color: #E84545;" v-if="im.pay_state == 0"> 未支付</view>
								<view style="font-size: 24rpx;color: #E84545;" v-if="im.pay_state == 1"> 已支付 </view>
								<view style="font-size: 24rpx;color: #E84545;" v-if="im.pay_state == 2"> 已退款 </view>
								<view style="font-size: 24rpx;color: #E84545;" v-if="im.pay_state == 3"> 已作废 </view>
							</view>
						</view>
						<block>
							<view class="it">
								<view class="its">
									<view class="content d-flex" >
										<image :src="im.picture" style="width: 128rpx;height:128rpx" mode="">
										</image>

										<view class="right-content">
											<view class="flex-between">
												<view class="name ellipsis-2" style="width: 400rpx;">{{im.production_name}}
												</view>
												<view class="name ellipsis-2">
													<price :value="im.price" :color="'#343434'"></price>
												</view>
											</view>
											<view>
												<view class="flex-between">
													<view class="count">{{im.pay_time}}</view>
													<view class="count">X1</view>
												</view>
											</view>
										</view>
									</view>
									<view class="bottom">
										<view>
											<view class="flex-between">
												<view class="">
													{{im.create_time}}
												</view>
												<view class="d-flex">
													<view class="" style="font-size: 28rpx;">
														实付：￥{{im.payment}}
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class="bottom">
										<view>
											<view class="flex-between">
												<text style="color: #5677fc"></text>
												<view class="d-flex">
													<u-button text="申请退款" @click="requestRefund(im)" plain
														color="#999999" v-if="im.can_refund == 1">
													</u-button>
													<!-- <u-button text="查看物流" @click="toComments(im,item)" plain
														color="#999999" v-if="currentTab == 3 || currentTab == 4 ">
													</u-button>
													<u-button text="确认收货" @click="toCommentList(im)"
														v-if="currentTab == 3 || currentTab == 4 "
														color="linear-gradient(0deg, #0E9698, #0E9698)"></u-button> -->
													<!-- 	<u-button text="取消订单" @click="toCommentList(item)"  v-if="currentTab == 1"
															color="linear-gradient(0deg, #0E9698, #0E9698)"></u-button> -->
													<!-- <u-button text="去支付" @click="paytList(im,item)"
														v-if="currentTab == 1 || currentTab == 0  &&item.orderStatus =='待付款'"
														color="linear-gradient(0deg, #0E9698, #0E9698)"></u-button> -->
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>

			<u-empty v-else mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" />
		</view>
	</view>
</template>

<script>
	const index = require("@/api/index/index.js");
	/*
		状态
		1：全部
		2：待付款
		3：待发货
		4：已发货
		5:售后
	*/
	export default {
		data() {
			return {
				list1: [],
				assetsPath: this.$https.assetsPath,
				currentTab: 0,
				tabsList: [{
						name: "全部"
					},
					{
						name: "已付款"
					},
					{
						name: "已退款"
					},
					{
						name: "已作废"
					}
				],
				searchValue: "",
				ordersList: [],
				searchKey: "", //搜索关键词
				val: '', //关键词
				orderStatus: '',
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
				empty_s: false,
				goods_type: '',
				ticketData: {},
				amountValue: 1,
				spec: "",
				order_remarks: '',
				train_price: "0.00",
				lop: "",
				orderStatus:''
			};
		},
		onLoad() {
		},
		onShow() {
			this.orderpage()
		},
		methods: {
			onClickTab({
				index
			}) {
				this.currentTab = index;
				this.ordersList = [];
				this.listQuery.pageNo = 1
				console.log(this.currentTab, '111122')
				if (this.currentTab === 1) {
					this.orderStatus = 1
				} else if (this.currentTab === 2) {
					this.orderStatus = 2
				}  else if (this.currentTab === 3) {
					this.orderStatus = 3
				} else {
					this.orderStatus = ''
				}
				this.orderpage();
			},
			// 获取我的订单
			async orderpage() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.ordersList = [];
				let postData = {
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
					'pay_state-=':this.orderStatus
				};
				console.log(postData,'1111')
				let res = await index.wxbill(postData);
				if (res.code == 1) {
					that.ordersList = that.ordersList.concat(res.data.rows); //将数据拼接在一起
					console.log(that.ordersList,'pp[[]]')
					that.totalPage = res.data.last_page
				} 
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.orderpage()
			},
			async toComments(im, item) {
				console.log(im, item, '9999')
				uni.navigateTo({
					url: '../wuliu/wuliu?wayBillNo=' + item.wayBillNo + "&wayCompanyConstant=" + item
						.wayCompanyConstant
				})

			},
			async toCommentList(im) {
				console.log(im, '12')
				let that = this;
				let postData = {
					id: im.id,
					action: '确认收货',
				};
				let res = await venues.listAction(postData);
				console.log(res)
				if (res.data.code == 200) {}
			},
			paytList(im, item) {
				console.log(im, item, '999999')
				// console.log(item.wxPayInfo,'3333')
				// let bookCopy = JSON.parse(item.wxPayInfo);
				// console.log(JbookCopy,'6666')

				// person.reOrder({
				// 	orderNo: im.orderNo
				// }).then(res => {
				// 	if (res.data.code == 200) {
				// 		console.log(res)
				// 	}
				// })
				uni.navigateTo({
					// url: `/page_other/pay/pay?skulist=${encodeURIComponent(JSON.stringify(this.skulist))}` +
					// 	'&productDetailCode=' + this.productDetailCode +
					// 	"&deductionLedou=" + this.ledouAll + "&youhuiquanid=" + this.youhuiquanid +
					// 	"&addressId=" + this.consignee.addressId + "&moneyAfter=" + this.moneyAfter +
					// 	"&pay_labal=" + 2

					// url: `/page_other/pay/topay?wxPayInfo=${encodeURIComponent(JSON.stringify(item.wxPayInfo))}` +
					// 	"&moneyAfter=" + item.moneyPay +
					// 	"&pay_labal=" + 2

					url: '/page_other/pay/topay?pay_labal=' + 2 + "&moneyAfter=" + item.moneyPay + "&orderNo=" + im
						.orderNo

				})
			},
			requestRefund(im) {
				uni.navigateTo({
					// url: '../refund/refund?id=' + im.id + "&orderid=" + im.orderid + "&money=" + im.payment + "&bill_type=" + im.bill_type
					url: '../refund/refund?item=' + encodeURIComponent(JSON.stringify(im))
				})
			},
			// 搜索字
			search(val) {
				this.val = val
				this.page = 1;
				this.ordersList = [];
				this.status = "loading";
				this.orderpage();
			},
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.orders {
		background-color: #f1f2f2;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);

		/deep/.u-tabs {
			background-color: #fff;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		/deep/.u-input {
			height: 100%;
			border-color: #0E9698 !important;
		}

		.orders-content {
			// padding: 20rpx 40rpx;
		}

		.orders-item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx 24rpx 0;

			&+.orders-item {
				margin-top: 20rpx;
			}

			.not-done {
				color: #ff4207;
			}

			.status {
				white-space: nowrap;
				margin-left: 10rpx;
			}

			.it {
				padding: 24rpx 0;
			}

			.its {
				padding: 24rpx 0;
			}

			.content {
				.right-content {
					margin-left: 24rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					flex: 1;
					font-size: 28rpx;
					color: rgb(51, 51, 51);
				}

				.time {
					padding: 0 24rpx;
					background-color: rgb(243, 243, 243);
					display: inline-block;
					border-radius: 100px;
					margin-bottom: 10rpx;
				}

				.price {
					.rmb {
						font-size: 20rpx;
					}

					.big {
						font-size: 20rpx;
						color: #ff4207 !important;
					}
				}
			}

			.bottom {
				font-size: 24rpx;
				margin-top: 30rpx;

				/deep/.u-button {
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;

					&+.u-button {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>